import { useState, useEffect } from "react";
import { Image } from "antd";
import BANNER5 from "assets/banner5.jpg";
import { getAboutUs } from "@/utils/request/index";

function aboutUs() {
  const [aboutData, setAboutData] = useState({
    category: [],
    description: {
      content: "",
      title: "",
    },
    mainImg: "",
  });

  function loadGetAboutUs() {
    getAboutUs().then((res) => {
      setAboutData({
        category: res.category,
        description: res.description,
        mainImg: res.mainImg,
      });
    });
  }

  useEffect(() => {
    loadGetAboutUs();
  }, []);

  return (
    <>
      <div id="bannerShow">
        <a href="#">
          <Image src={BANNER5} alt="" />
        </a>
      </div>

      <div id="breadcrumb">
        <div className="container">
          <a href="index">首页</a>
          <span> >> </span>
          <a href="aboutUs">关于我们</a>
        </div>
      </div>

      <div id="select" className="container">
        <div className="title">
          <h1 className="chinese">关于我们</h1>
        </div>
        <div className="content clearfix">
          <div className="list">
            {aboutData.category.map((item,index)=>{
              return <a href="#" key={index}>{item.label}</a>
            })}
            <Image src={aboutData.mainImg} alt="wqpl" />
          </div>
          <div className="company right">
            <h2>{aboutData.description.title}</h2>
            <p className="margin32px">
              {aboutData.description.content}
            </p>
          </div>
        </div>
      </div>
    </>
  );
}

export default aboutUs;
